<template>
	<div v-show="activityId" class="card-discount-detail">
		<div v-show="url" class="banner" :style="{ 'backgroundImage': `url(${url})` }">
			<h2 :class="{ 'gradient': questSuccess }">
				<span>{{ title }}</span>
			</h2>
		</div>
		<div v-show="!isHiddenCardBtn" class="bank">
			<img :src="bankUrl" alt="bank">
			<!--<iframe :href="`https://m.ppdai.com/act/huan/img_for_ppdai.html?imgsrc=${bankUrl}`" frameborder="0"></iframe>-->
			<!--<a @click="applyCard({
					'tgt_type': 'button',
					'tgt_name': `hh-详情页-立即办卡-${bankId}`,
					'tgt_event_id': 'hh_detailpage_card',
					'target_url': applyCardUrl,
					'url': locationHref
				})">立即办卡</a>-->
			<p>{{ bankName }}</p>
		</div>
		<div class="content count">
			<section v-show="receiveDescription">
				<h3>活动方式</h3>
				<comp-markdown :source="receiveDescription"></comp-markdown>
			</section>
			<section>
				<comp-markdown :source="content"></comp-markdown>
			</section>
			<section>
				<h3>活动时间</h3>
				<p>截止日期：{{ endDate }}</p>
			</section>
		</div>
		<div v-if="!isShared" class="member">
			<h3>参与商户（共<span>{{ shopList.totalCount }}</span>家）</h3>
			<ul>
				<li v-for="item in shopList.list">
					<a @click="makePhoneCall(item.tel, {
						'tgt_type': 'icon',
						'tgt_name': 'hh-详情页-拨号',
						'tgt_event_id': 'hh_detailpage_call',
						'target_url': item.tel,
						'url': locationHref
					})" class="link-tel">
						<img
							:src="imgSrcTel['2x']"
							:srcset="`${imgSrcTel['2x']} 46w, ${imgSrcTel['3x']} 69w`"
							sizes="46px"
							alt="tel">
					</a>
					<a @click="callupMap(item)" class="link-map">
						<span>{{ item.distance + item.unit }}</span>
						<h4>{{ item.name }}</h4>
						<p>{{ item.address }}</p>
					</a>
				</li>
			</ul>
			<div :class="{ 'is-end': isListEnd }">
				<button @click="loadMember" class="more-load">点击加载更多</button>
				<span class="more-none">全部加载完毕</span>
			</div>
		</div>
		<div v-if="isShared" @click="downloadApp({
				'tgt_type': 'icon',
				'tgt_name': 'hh-分享页-下载APP',
				'tgt_event_id': 'hh_detailpage_download',
				'target_url': '//a.app.qq.com/o/simple.jsp?pkgname=com.ppdai.huanapp',
				'url': locationHref
			})" class="share-container">
			<section>
				<img
					:src="imgSrcLogo['2x']"
					:srcset="`${imgSrcLogo['2x']} 100w, ${imgSrcLogo['3x']} 150w`"
					sizes="100px"
					alt="logo">
				<span>下载App</span>
				<p>更多信用卡优惠，尽在还卡超人App</p>
			</section>
		</div>
		<div v-show="!questSuccess" class="loading">
			<img src="//hh.ppdaicdn.com/static/images/common/loading.gif" alt="loading">
		</div>
	</div>
</template>

<script>
	import CompMarkdown from 'vue-markdown';

	export default {
		'name': 'view-other_static-card_discount_detail',
		data() {
			return {
				'locationHref': location.href,
				'activityId': this.$getURLSearchParam('activityid'),
				'longitude': this.$getURLSearchParam('longitude') || '121.4763072256',
				'latitude': this.$getURLSearchParam('latitude') || '31.2297339198',
				'bankId': this.$getURLSearchParam('bankid'),
				'bankName': '',
				'bankUrl': '',
				'endDate': '',
				'startDate': '',
				'title': '',
				'discount': '',
				'content': '',
				'url': '',
				'receiveDescription': '',
				/*'applyCardUrl': '',*/
				'shopList': {
					'pageNo': 1,
					'pageSize': 0,
					'totalCount': 0,
					'list': [],
					'nextPage': 0,
					'hasPrePage': false,
					'hasNextPage': false,
					'prePage': 0,
					'start': 0,
					'totalPageCount': 0
				},
				'isListEnd': false,
				'isShared': !!this.$getURLSearchParam('shared'),
				'imgSrcTel': {
					'2x': '//hh.ppdaicdn.com/static/images/other_static/card_discount_detail/coupons_details_phone_disable@2x.png',
					'3x': '//hh.ppdaicdn.com/static/images/other_static/card_discount_detail/coupons_details_phone_disable@3x.png'
				},
				'imgSrcLogo': {
					'2x': '//hh.ppdaicdn.com/static/images/other_static/card_discount_detail/download_icon@2x.png',
					'3x': '//hh.ppdaicdn.com/static/images/other_static/card_discount_detail/download_icon@3x.png'
				},
				'questSuccess': false,
				'isHiddenCardBtn': !!this.$getURLSearchParam('isHiddenCardBtn')
			};
		},
		'methods': {
			showShare() {
				this.$callBridgeHandler({
					'name': 'shareData',
					'nameMessage': '显示分享按钮',
					'data': {
						'logoUrl': this.url,
						'title': this.title,
						'subTitle': '更多信用卡优惠，尽在还卡超人APP！',
						'shareUrl': `${this.locationHref}&shared=1`,
						'redbag': 0
					}
				});
			},
			getData() {
				this.$post('//m.huankachaoren.com/api/favor/getDetailByActivityId.htm', {
					'ActvityId': this.activityId,
					'Longitude': this.longitude,
					'Latitude': this.latitude,
					'BankId': this.bankId
				}).then(data => {
					if (data.result !== 0) {
						return console.error('数据获取失败');
					}
					this.questSuccess = true;
					let content = Object.assign({}, data.content, {
						'shopList': (() => {
							if (!data.content.shopList) {
								return this.shopList;
							}
							return Object.assign({}, data.content.shopList, {
								'list': data.content.shopList.list.map(item => Object.assign(item, {
									'tel': item.tel ? item.tel.split(',')[0] : ''
								}))
							});
						})(),
						'startDate': data.content.startDate || '-',
						'endDate': data.content.endDate || '-',
						'bankUrl': `//hh.ppdaicdn.com/static/images/bank/${data.content.bankUrl.split('/').slice(-1)[0]}?v=1`
					});
					Object.entries(content).forEach(([key, val]) => {
						this[key] = val;
					});
					this.isListEnd = !data.content.shopList || !data.content.shopList.hasNextPage;
					this.showShare();
					window.document.addEventListener('WebViewJavascriptBridgeReady', () => {
						this.showShare();
					});
				});
			},
			loadMember() {
				this.$post('//m.huankachaoren.com/api/favor/getShopListByActivityId.htm', {
					'ActvityId': this.activityId,
					'Longitude': this.longitude,
					'Latitude': this.latitude,
					'Page': this.shopList.nextPage || this.shopList.pageNo + 1,
					'PageSize': this.shopList.pageSize
				}).then(data => {
					if (data.result !== 0) {
						return console.error('数据获取失败');
					}
					Object.entries(data.content).forEach(([key, val]) => {
						if (key !== 'list') {
							return this.shopList[key] = val;
						}
						this.shopList.list = this.shopList.list.concat(...val.map(item => Object.assign(item, {
							'tel': item.tel ? item.tel.split(',')[0] : ''
						})));
					});
					if (!data.content.hasNextPage) {
						this.isListEnd = true;
					}
				});
			},
			/*applyCard(sensorObj) {
				this.sensorTrack(sensorObj);
				this.$callBridgeHandler({
					'name': 'navigateH5Url',
					'nameMessage': '跳转立即办卡',
					'data': {
						'url': this.applyCardUrl,
						'title': '立即办卡'
					},
					'errorCallback': ex => location.assign(this.applyCardUrl)
				});
			},*/
			callupMap(item) {
				let {...newItem} = item;
				this.$callBridgeHandler({
					'name': 'callupMap',
					'nameMessage': '打开地图',
					'data': newItem
				});
			},
			makePhoneCall(tel, sensorObj) {
				this.sensorTrack(sensorObj);
				this.$callBridgeHandler({
					'name': 'openURL',
					'nameMessage': '打开电话',
					'data': {
						'url': `telprompt://${tel}`
					}
				});
			},
			downloadApp(sensorObj) {
				this.sensorTrack(sensorObj);
				location.assign('//a.app.qq.com/o/simple.jsp?pkgname=com.ppdai.huanapp');
			},
			sensorTrack(sensorObj) {
				try {
					window.sa.track('h5_clk', sensorObj);
				} catch(ex) {
					console.log('神策统计功能失败');
				}
			}
		},
		'components': {
			CompMarkdown
		},
		created() {
			if (this.activityId === '' || this.longitude === '' || this.latitude === '') {
				return;
			}
			this.getData();
		}
	};
</script>

<style scoped>
	html {
		font-size: 16px;
	}
	h2,
	h3,
	h4,
	p {
		margin: 0;
		font-weight: normal;
	}
	img {
		display: block;
	}
	a {
		text-decoration: none;
	}
	.card-discount-detail {
		overflow: hidden;
		font-size: 14px;
		line-height: 2;
		background-color: #f3f3f8;
	}
	.banner {
		position: relative;
		background: center no-repeat #ffffff;
		background-size: cover;
	}
	.banner::after {
		content: "";
		display: block;
		padding-top: 53.33%;
	}
	.banner h2 {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2.5rem;
		color: #ffffff;
		font-size: 15px;
	}
	.banner h2.gradient {
		background-image: linear-gradient(-180deg, rgba(77,77,77,0.00) 0%, rgba(38,38,38,0.55) 100%);
	}
	.banner h2 span {
		display: block;
		margin: 0 1rem;
		line-height: 1.2;
	}
	.bank,
	.content,
	.member {
		background-color: #ffffff;
	}
	.bank {
		padding: 1rem;
		line-height: 28px;
	}
	.bank img {
		float: left;
		width: 28px;
		height: 28px;
		margin-right: 0.5rem;
	}
	.bank iframe {
		float: left;
		width: 28px;
		height: 28px;
		margin: 0 0.5rem 0 0;
		border: none;
	}
	.bank a {
		float: right;
		height: 28px;
		padding: 0 0.5rem;
		border-radius: 2px;
		color: #ffffff;
		font-size: 12px;
		background-color: #6da5ff;
	}
	.bank p {
		display: inline-block;
		height: 1.8rem;
		color: #252525;
		font-size: 15px;
	}
	.content {
		margin-top: 0.7rem;
		padding: 1.2rem 1rem;
		color: #9c9c9c;
	}
	.content h3 {
		color: #252525;
		margin-top: 1.2em;
		font-size: 14px;
	}
	.content section:first-child h3 {
		margin-top: 0;
	}
	.content h3::before {
		content: "";
		display: inline-block;
		width: 0.2em;
		height: 0.85em;
		margin: 0.6em 0.4em 0 0;
		vertical-align: top;
		background-color: #508cee;
	}
	.content section img,
	.content section table {
		max-width: 100%;
	}
	.member {
		margin: 0.7rem 0;
	}
	.member h3 {
		height: 2.5rem;
		padding: 0 1rem;
		border-bottom: 1px solid #eeeeee;
		font-size: 13px;
		line-height: 2.5rem;
	}
	.member li {
		overflow: hidden;
		position: relative;
		padding: 1rem;
		line-height: 1.4;
	}
	.member li::before {
		content: "";
		position: absolute;
		top: 1.68125rem;
		left: 3.375rem;
		width: 1px;
		height: 1rem;
		background-color: #d8d8d8;
	}
	.member li::after {
		content: "";
		position: absolute;
		left: 1rem;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: #eeeeee;
		clear: both;
	}
	.member li .link-tel {
		float: left;
		width: 1.375rem;
		margin: 0.49375rem 2rem 0 0;
		-webkit-tap-highlight-color: transparent;
	}
	.member li img {
		width: 100%;
	}
	.member li .link-map {
		display: block;
		overflow: hidden;
	}
	.member li span {
		position: relative;
		float: right;
		margin: 0.65625rem 1.125rem 0 1rem;
		color: #8d8d8d;
		font-size: 12px;
	}
	.member li span::before,
	.member li span::after {
		content: "";
		position: absolute;
		top: 0.4375rem;
		width: 0;
		height: 0;
		margin-top: -0.4375rem;
		border: 0.4375rem solid;
		border-top-color: transparent;
		border-right: none;
		border-bottom-color: transparent;
	}
	.member li span::before {
		right: -1.125rem;
		border-left-color: #8d8d8d;
	}
	.member li span::after {
		right: -1.025rem;
		border-left-color: #ffffff;
	}
	.member li h4,
	.member li p {
		overflow: hidden;
		height: 1.4em;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.member li h4 {
		font-size: 13px;
		margin-bottom: 0.2rem;
	}
	.member li p {
		color: #8d8d8d;
		font-size: 12px;
	}
	.member .more-load,
	.member .more-none {
		height: 2.5rem;
		text-align: center;
		font-size: 13px;
		line-height: 2.5rem;
	}
	.member .more-load {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
		outline: none;
		color: #6da5ff;
		background-color: #ffffff;
	}
	.member .more-none {
		display: none;
		color: #9c9c9c;
	}
	.member .is-end .more-load {
		display: none;
	}
	.member .is-end .more-none {
		display: block;
	}
	.share-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		margin-bottom: 1.25rem;
	}
	.share-container section {
		overflow: hidden;
		margin: 0 1.25rem;
		padding: 1rem;
		border-radius: 0.5rem;
		background-color: rgba(37,37,37,0.55);
	}
	.share-container img {
		float: left;
		width: 3.125rem;
		margin-right: 1rem;
	}
	.share-container span {
		float: right;
		height: 2.25rem;
		margin: 0.5rem 0 0 1rem;
		padding: 0 0.8rem;
		border-radius: 1.125rem;
		color: #6da5ff;
		line-height: 2.25rem;
		background-color: #ffffff;
	}
	.share-container p {
		overflow: hidden;
		height: 2.8em;
		margin-top: 0.25rem;
		color: #ffffff;
		font-size: 15px;
		line-height: 1.4em;
	}
	.loading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.loading img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2rem;
		height: 2rem;
		margin: -1rem;
	}
</style>
<style type="text/postcss">
	.card-discount-detail {
		h5 {
			margin: 1.2em 0 0;
			color: #252525;
			font-weight: normal;
			font-size: 14px;
			&:first-child {
				margin-top: 0;
			}
		}
		h5::before {
			content: "";
			display: inline-block;
			width: 0.2em;
			height: 0.85em;
			margin: 0.6em 0.4em 0 0;
			vertical-align: top;
			background-color: #508cee;
		}
		ul,
		ol {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.count li {
			counter-increment: list;
		}
		.count li::before {
			content: counter(list)". ";
		}
	}
</style>
